<style lang="scss" scoped >
    .login{
        width: 500px;
        height: 300px;
        margin: 100px auto;
        border: 1px solid #000;
        padding: 20px;
    }
</style>
<template>
    <div class="login">
        <el-form label-width="80px" ref="ruleFormRef" :model="FormData" :rules="rules" >
            <el-form-item label="账号" prop="username">
                <el-input v-model="FormData.username" placeholder="请输入账号"></el-input>
            </el-form-item>
             <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="FormData.password" placeholder="请输入密码"></el-input>
            </el-form-item>
             <el-form-item>
                <el-button type="primary" @click="handLogin">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup lang="ts">
    import { reactive, ref } from "vue";
    import { ElMessage, FormInstance, FormRules } from 'element-plus'
    import {useRouter} from 'vue-router'
    const router=useRouter()
    import axios from 'axios'
    const FormData=ref({
        username:"admin",
        password:"admin"
    })

  const ruleFormRef=ref<FormInstance>()
  const rules=reactive<FormRules>({
    username:[{
        required:true,
        message:"请输入账号"
    }],
    password:[{
        required:true,
        message:"请输入密码"
    }]
  })
  const handLogin=()=>{
    ruleFormRef.value?.validate()
    .then(async()=>{
    //  登录
    const res=await axios.post('/api/login',FormData.value)
    console.log(res.data)
    if(res.data.code===10000)
    {
        ElMessage.success(res.data.message)
        router.push('/')
        localStorage.setItem('accessToken',res.data.data.accessToken)
        localStorage.setItem('userInfo',JSON.stringify(res.data.data.userInfo))
        localStorage.setItem('refreshToken',res.data.data.refreshToken)
    }else{
        ElMessage.error(res.data.message)
    }
    })
    .catch(()=>{
        console.log('登录失败')
    })
  }
</script>